@charset "utf-8";

/*
  scss公用方法定义
  1.全局样式规定。
*/

@mixin m($num:0) {
  margin: $num;
}

@mixin p($num:0) {
  padding: $num;
}

@mixin min-body-width {
  min-width: 1080px;
}

@mixin min-content-width {
  width: 1080px;
}

@mixin width($num:0px) {
  width: $num;
}

@mixin height($num:0px) {
  height: $num;
}

@mixin backface-visibility($tyle:hidden) {
  backface-visibility: $tyle;
  -webkit-backface-visibility: $tyle;
  -moz-backface-visibility: $tyle;
  -ms-backface-visibility: $tyle;
}

@mixin transition($num:.5s) {
  transition: $num;
  -webkit-transition: $num;
  -moz-transition: $num;
  -o-transition: $num;
}

@mixin transition-delay($num:.5s) {
  transition-delay: $num;
  -webkit-transition-delay: $num;
  -moz-transition-delay: $num;
  -o-transition-delay: $num;
}

@mixin transition-duration($num:.5s) {
  transition-duration: $num;
  -webkit-transition-duration: $num;
  -moz-transition-duration: $num;
  -o-transition-duration: $num;
}

@mixin transition-fn($num) {
  transition: $num;
  -webkit-transition: $num;
  -moz-transition: $num;
  -o-transition: $num;
}

@mixin transform($num) {
  transform: $num;
  -webkit-transform: $num;
  -moz-transform: $num;
  -o-transform: $num;
}

@mixin transform-origin($num) {
  transform-origin: $num;
  -webkit-transform-origin: $num;
  -moz-transform-origin: $num;
  -o-transform-origin: $num;
}

// 模糊
@mixin filter($num) {
  //blur(5px)
  -webkit-filter: $num;
  -moz-filter: $num;
  -o-filter: $num;
  -ms-filter: $num;
  filter: $num;
}


/*居中*/

@mixin content {
  @include min-body-width;
  @include min-content-width;
  @include m(0 auto);
}


/*去除浮动*/

@mixin clearfix {
  clear: both;
  &:after,
  &:before {
    content: '';
    display: table;
  }
}

@mixin clearfix-row {
  @include clearfix();
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

@mixin btn {
  line-height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
  color: #666;
  font-size: 12px;
}

// 按钮hover下滑线效果
@mixin btn-hover-line($time:.3s, $color:#333) {
  &:after {
    @include transition($time);
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    border-bottom: 1px solid $color;
  }
  &:hover {
    &:after {
      width: 100%;
      left: 0;
    }
  }
}

@mixin box-shadow5 {
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
}

@mixin box-shadow($num) {
  -moz-box-shadow: $num;
  -webkit-box-shadow: $num;
  box-shadow: $num;
}

@mixin animation($name:'', $time:0s, $delay:0, $count:1, $function:linear) {
  //infinite
  animation-name: $name;
  animation-duration: $time;
  animation-timing-function: $function;
  animation-iteration-count: $count; //animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-delay: $delay;

  -webkit-animation-name: $name;
  -webkit-animation-duration: $time;
  -webkit-animation-timing-function: $function;
  -webkit-animation-iteration-count: $count; //-webkit-animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: $delay;

  -moz-animation-name: $name;
  -moz-animation-duration: $time;
  -moz-animation-timing-function: $function;
  -moz-animation-iteration-count: $count; //-moz-animation-direction: alternate;
  -moz-animation-fill-mode: forwards;
  -moz-animation-delay: $delay;

  -o-animation-name: $name;
  -o-animation-duration: $time;
  -o-animation-timing-function: $function;
  -o-animation-iteration-count: $count; //-o-animation-direction: alternate;
  -o-animation-fill-mode: forwards;
  -o-animation-delay: $delay;
}

@mixin radius($unit:0) {
  -o-border-radius: $unit;
  -moz-border-radius: $unit;
  -webkit-border-radius: $unit;
  border-radius: $unit;
}

//@-webkit-keyframes
//@-o-keyframes
//@-moz-keyframes
@mixin scrolling-touch() {
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -webkit-text-size-adjust: none;
}

.scrolling-touch {
  @include scrolling-touch();
}

@keyframes error-icon {
  0% {
    @include transform(translateX(0px));
  }
  33% {
    @include transform(translateX(-5px));
  }
  66% {
    @include transform(translateX(5px));
  }
  100% {
    @include transform(translateY(0px));
  }
}

@-webkit-keyframes error-icon {
  0% {
    @include transform(translateX(0px));
  }
  33% {
    @include transform(translateX(-5px));
  }
  66% {
    @include transform(translateX(5px));
  }
  100% {
    @include transform(translateY(0px));
  }
}

@-moz-keyframes error-icon {
  0% {
    @include transform(translateX(0px));
  }
  33% {
    @include transform(translateX(-5px));
  }
  66% {
    @include transform(translateX(5px));
  }
  100% {
    @include transform(translateY(0px));
  }
}
